<template>
  <view class="container">
    <view class="header">
      <view class="card">
        <view class="j">门店余额(元)</view>
        <view class="money">{{ info?.money }}</view>
        <view class="flex">
          <view class="item">
            <view class="item-label">总充值(元)</view>
            <view class="item-value">{{info?.chongzhi}}</view>
          </view>
          <view class="item">
            <view class="item-label">总消费(元)</view>
            <view class="item-value">{{info?.hongbao}}</view>
          </view>
        </view>
      </view>
    </view>
    <u-tabs :current="activeTab" :list="tabs" keyName="title" :scrollable="false" @change="handleTabChange"></u-tabs>
    <view class="content">
      <f-list ref="listRef" :request="getData">
        <template #default="{item, index}">
          <com-finance-item :item="item"></com-finance-item>
        </template>
      </f-list>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import FList from '@/addon/htscrm/components/f-list/index.vue';
import { getStoreMoneyLogApi } from '@/addon/htscrm/api';
import ComFinanceItem from './com-finance-item.vue';
const searchForm = ref<any>({})
const tabs = ref<any[]>([
  { title: '充值记录', id: 'chongzhi' },
  { title: '红包记录', id: 'hongbao' },
]); 
const activeTab = ref(0);

const info = ref();
const listRef = ref()
async function getData(meta: any) {
  const params = {
    ...searchForm.value,
    type: tabs.value[activeTab.value].id,
    ...meta
  }
  const res = await getStoreMoneyLogApi(params)
  if (res.code == 1) {
    info.value = res.data.sum_info
    return res.data.list
  }
}

/**
 * 切换标签
 * @param val 
 */
 function handleTabChange(val:any) {
  activeTab.value = val.index
  listRef.value?.reload();
}

</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  overflow: hidden;

  .header {
    padding: 30rpx;
    .card {
      width: 690rpx;
      box-sizing: border-box;
      padding: 30rpx;
      background-color: #fc872d;
      color: #fff;
      border-radius: 20rpx;
      .money {
        font-size: 50rpx;
        font-weight: bold;
        line-height: normal;
      }

    }
    .flex {
      margin-top: 30rpx;
    }

    .item {
      flex: 1;
      display: flex;
      align-items: center;

      .item-value {
        font-size: 32rpx;
        font-weight: bold;
        margin-left: 20rpx;
      }
    }
  }

}
</style>